<template>
	<view class="page">
		<view class="u-tips-phone">当前绑定手机号码:<text>{{nUserPhone}}</text></view>
		
		<view class="g-item">
			<text class="name"> 验 证 码</text>
			<view class="g-info g-price">
				<input type="number" placeholder="请输入验证码" placeholder-style="color:#cecccf" maxlength="6" v-model="nCode">
				<button class="u-get-code" @tap="getCode">{{nCountdown ? nCountdown+' s' : '获取验证码'}}</button>
			</view>
		</view>
		<view class="g-item">
			<text class="name">到账方式</text>
			<view class="g-info g-type">
				<view>{{aType[0]}}</view>
			</view>
		</view>
        <view class="g-item">
        	<text class="name">到账账户</text>
        	<view class="g-info" @tap="isSelectcard"><text>{{sBankType ? sBankType : '请选择到账银行卡'}}</text></view>
        </view>
		<view class="g-item">
        	<text class="name">退取数量</text>
        	<view class="g-info g-price">
				<text class="icon">¥</text><input type="number" placeholder="请输入退取数量" placeholder-style="color:#cecccf" v-model="nPrice">
			</view>
        </view>
		
		<view class="g-tips">
			<view>可退取额度：<text>¥ {{userInfo.withdraw||0}}</text></view>
			<view>已用额度：<text>¥ {{userInfo.month_withdraw||0}}</text></view>
		</view>
		
        <button class="u-finish" @tap="finish()">提 交</button>
		<paymentPassword :show="payFlag" digits="6" @confirm="onConfirm" @cancel="togglePopup('payFlag')"></paymentPassword>
		
		<view class="g-frame-mask" v-if="showPopup" @tap="togglePopup('confirm')"></view>
		<view class="g-frame-mask" v-if="showPopup"></view>
		<view class="g-frame" v-if="showPopup">
			<view class="m-frame-header">
			    <view class="u-frame-title">提示</view>
			    <image class="u-frame-close" src="../../../static/icons/ydt/close.png" mode="widthFix" @tap="togglePopup('confirm')"></image>
			</view>
			<view class="u-frame-cont">
				本次退取数量：{{nPrice}}，请确认
			</view>
			<view class="m-frame-footer">
			    <view class="u-reset" @tap="togglePopup('confirm')">取消</view>
			    <view class="u-confirm" @tap="confirm">确定</view>
			</view>
		</view>
		<view class="m-loading" v-if="isShowLoading">
		    <image src="../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
	</view>
</template>

<script>
    import henglang from '@/common/common_zb.js';
	import md5 from '@/common/md5.js';
	export default {
		data() {
			return {
                aType: ['银行卡'],
                sType: '',
                nBank: '',
                nPrice: '',
				userInfo:{},
				sBankType: '',
				selectId: '',
				nZfb: '',
				isShowLoading: false,
				method: '',
				account: '',
				showPopup: false,
				tipsMsg:'',
				nCode:'',
				nCountdown: 0,
				nUserPhone:'',
				pageType: '',
				payFlag:false
			};
		},
        methods: {
			back(type){
				uni.hideKeyboard()
				if(type == 'back') uni.navigateBack()
			},
			togglePopup(type) {
				if(type == 'payFlag'){
					this.payFlag = !this.payFlag;
				}else{
					this.showPopup = !this.showPopup;
				}
			},
			confirm() {
				let that = this
				that.togglePopup()
				that.payFlag = true
				uni.hideKeyboard()
			},
			onConfirm(e){
				let that = this
				let sendData = {
					amount:that.nPrice,
					method:that.method,
					account:that.account,
					code:that.nCode,
					paypwd:md5(e)
				}
				uni.showLoading()
				henglang.post('withdraw/applyWithdraw',sendData,true,function(res){
					uni.hideLoading()
					henglang.showToast(res.data.msg,res.data.code == 0?500:1500);
					that.payFlag = false
					if(res.data.code == 0){
						setTimeout(() => {
							uni.redirectTo({
								url:'/pages/user/hl_takedeital'
							})
						}, 500)
					}
				});
			},
            selectType(e) {
				let that = this;
				let cardList = that.userInfo.bank[0];
                that.sType = that.aType[e.target.value];
				if(e.target.value == 0){
					if(cardList){
						that.sBankType = cardList.bank + '（尾号' + cardList.card_no.substring(cardList.card_no.length-4) + '）';
						that.selectId = cardList.id;
					}else{
						henglang.showToast('请绑定银行卡')
						uni.navigateTo({
							url:'/pages/user/settings/bank_card/add_card'
						})
						return
					}
					
				}
            },
			
			//开始选择到账方式
			isSelectcard() {
				if(this.userInfo.bank.length === 0){
					henglang.showToast('请绑定银行卡')
					setTimeout(() => {
						uni.navigateTo({
							url:'/pages/user/settings/bank_card/add_card'
						})
					}, 3000)
				}else if(this.userInfo.bank.length > 1){
					uni.navigateTo({
						url:'/pages/user/hl_selectcard?id=' + this.selectId
					})
				}
			},
			//选择银行卡后获取最新的银行卡id
			cardSelect() {
				let that = this;
				let cardList = that.userInfo.bank;
				that.selectId = uni.getStorageSync('selectCardId')
				if(cardList){
					for (let i = 0; i < cardList.length; i++) {
						if (cardList[i].id == that.selectId) {
							that.sBankType = cardList[i].bank +'（尾号'+ cardList[i].card_no.substring(cardList[i].card_no.length-4) + '）';
							break;
						}
					}
				}
 			},
			// 获取验证码
			getCode() {
			    let timer = null;
			    let that = this;
			    if (!this.nCountdown) {
					uni.showLoading({
						title: '正在发送'
					});
					henglang.post('member/sendVerify',{},true,function(res){
						uni.hideLoading()
						if(res.data.code == 0){
							henglang.showToast(res.data.msg,500);
							that.nCountdown = 60;
							timer = setInterval(() => {
							    that.nCountdown = --that.nCountdown;
							    if (!that.nCountdown) {
							        that.nCountdown = false;
							        clearInterval(timer);
							    }
							}, 1000)
						}else{
							henglang.showToast(res.data.msg);
						}
					},function(res){
						henglang.showToast('请求失败');
						that.nCountdown = false;
						clearInterval(timer);
						return;
					});
			    }
			},
            finish() {
				let that = this;
				that.method = 2
				that.account = that.selectId
				uni.hideKeyboard()
				if (!henglang.checkCode(that.nCode)) {
                    henglang.showToast('请输入正确的验证码');
                }else if(that.sBankType == ''){
					henglang.showToast('请选择到账银行卡');
				}else if (!that.nPrice) {
                    henglang.showToast('请输入退取数量！');
                }else if(that.userInfo.withdraw == 0 || that.userInfo.withdraw == 0.00){
					henglang.showToast('暂无可退取额度！');
				}else{
					//获取手续费
					uni.showLoading()
					henglang.post('Withdraw/getInfo',{},true,function(res){
						uni.hideLoading()
						if(res.data.msg) henglang.showToast(res.data.msg)
						if(res.data.code != -1) that.togglePopup()
					});
				}
            },
			getuserCard() {
				let that = this;
				that.isShowLoading = true;
				henglang.get('withdraw/getInfo',{},true,function(res){
					that.isShowLoading = false;
					that.userInfo = res.data.data;
					if(that.userInfo.bank.length == 1){
						let cardList = that.userInfo.bank[0] 
						that.sBankType = cardList.bank + '（尾号' + cardList.card_no.substring(cardList.card_no.length-4) + '）';
						that.selectId = cardList.id
					}else{ 
						that.selectId = uni.getStorageSync('selectCardId')
						let cardList = that.userInfo.bank
						for (let i = 0; i < cardList.length; i++) {
							if (cardList[i].id == that.selectId) {
								that.sBankType = cardList[i].bank +'（尾号'+ cardList[i].card_no.substring(cardList[i].card_no.length-4) + '）';
								that.selectId = cardList[i].id
								break;
							}
						}
					}
				});
			},
			
        },
		onLoad() {
			let that = this
			that.isShowLoading = true;
			henglang.get('member/hasPaypwd',{},true,function(res){
				that.isShowLoading = false;
				if(!res.data.data.has_paypwd){
					henglang.showToast('请先设置支付密码')
					setTimeout(() => {
						uni.navigateTo({
							url:'/pages/user/settings/set_checkpwd'
						})
					}, 3000)
				}
			});
			uni.getStorage({
				key: 'userInfo',
				success: function (res) {
					that.nUserPhone = res.data.mobile.slice(0,3) + '****' + res.data.mobile.slice(7);
				}
			});
		},
		onShow() {
			this.cardSelect();
			this.getuserCard();
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) { 
				uni.navigateTo({
					url:'/pages/jewel/order/hl_takedeital'
				})
			}
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {  
				return false;  
			}  
			this.back('back');  
			return true;  
		}
	}
</script>


<style>
	.page{
		background: #f5f5f5;
	}
	.g-item{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 91upx;
		background: #ffffff;
		margin-bottom: 19upx;
		padding: 0 27upx;
		
	}
	.g-item .name{
		width: 120upx;
	}
    .g-type picker {
        flex: 1;
        position: relative;
        z-index: 2;
        color: #000000;
		text-align: left;
    }
	.g-tips{
		color: #6f6f6f;
		font-size: 26upx;
		padding: 0 27upx;
		line-height: 40upx;
	}
	.g-tips text{
		color: #d71611;
	}
	.g-info{
		margin-left: 50upx;
		position: relative;
		display: flex;
		align-items: center;
		width: 67%;
		position: relative;
	}
	.g-info .icon{
		color: #272727;
		font-size: 30upx;
		line-height: 91upx;
		margin-right: 10upx;
	}
	.g-info.g-price{
		display: flex;
		flex: 1;
		justify-content: left;
		align-items: center;
	}
    .u-finish {
        width: 90%;
        margin:50upx auto;
        background: #d71611;
        color: #fff;
        padding: 12px 0;
        border-radius: 100px;
        box-shadow: 0 0 10px rgba(0,0,0,.2);
    }
	.g-frame {
	    width: 581upx;
	    background: #fff;
	    border-radius: 20upx;
	    position: fixed;
	    top: 50%;
	    overflow: hidden;
	    left: 50%;
		margin-top: -215upx;
		margin-left: -290upx;
		z-index: 12;
	}
	
	.g-frame-mask {
	    background: #000;
	    opacity: .5;
	    height: 100vh;
	    width: 100%;
	    position: fixed;
	    top: 0upx;
		z-index: 11;
	}
	
	.m-frame-header {
	    height: 110upx;
	    width: 100%;
	    background: #d71311;
	    border-top-right-radius: 20upx;
	    border-top-left-radius: 20upx;
		position: relative;
		margin-bottom: 35upx;
	}
	.u-frame-title {
	    width: 100%;
	    text-align: center;
	    color: #fff;
	    line-height: 110upx;
	    font-size: 32upx;
	}
	
	.u-frame-close {
	    width: 42upx;
	    height: 42upx;
	    background-size: 100%;
	    position: absolute;
	    top: 50%;
		margin-top: -21upx;
	    right: 32upx;
	}
	.u-frame-cont{
		text-align: center;
		font-size: 36upx;
		padding-bottom: 35upx;
		line-height: 60upx;
		width: 500upx;
		margin: 0 auto;
	}
	.m-frame-footer {
	    height: 100upx;
	    width: 100%;
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		margin-top: 20upx;
	}
	
	.m-frame-footer view {
		flex: 1;
	    line-height: 100upx;
	    text-align: center;
	    font-size: 32upx;
	}
	
	.u-reset {
	    color: #ff0000;
	    background: #fff;
	}
	
	.u-confirm {
	    background: #d71311;
	    color: #fff;
	    border-bottom-right-radius: 16upx;
	}
	.u-tips-phone {
		padding: 20upx;
	}
	.u-get-code {
	    border-radius: 4px;
	    color: #fff;
	    background: #f7ba43;
	    padding: 12upx 16upx;
	    position: absolute;
	    z-index: 3;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
</style>